<template>
    <div class="order-report">
        <div class="report-table-top-title">增值服务列表</div>
        <el-tabs v-model="activeName">
            <el-tab-pane label="服务列表" name="1">
                <shopList></shopList>
            </el-tab-pane>
            <el-tab-pane label="成本设置" name="2">
                <priceList v-if="activeName === '2'"></priceList>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script type="text/ecmascript-6">
import shopList from './components/shopList.vue'
import priceList from './components/priceList.vue'
export default {
    data: function () {
        return {
            activeName: '1'
        }
    },
    mounted () {
    },
    created () {
    },
    watch: {
    },
    components: {
        shopList,
        priceList
    },
    props: {
        underLine: null
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.order-report
    width: 100%
    background: #fff
    min-height: calc(100vh - 65px)
    position: relative

    .report-table-top-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px
        background: #f1f0f5

    .report-table-form1
        width: 100%
        min-height: 40px
        padding: 16px 0 0 22px
        box-sizing: border-box
        background: #fff
        overflow: hidden

        .report-table-form1-line
            min-height: 32px
            margin-bottom: 16px

            .report-table-form1-item
                display: inline-block
                vertical-align: top
                height: 32px
                margin-right: 15px
                line-height: 32px

                &.word
                    margin-right: 0

                &.samll
                    font-size: 15px
                    text-align: left

                &.big
                    margin-right: 100px

    .report-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .report-table-block-in
            float: right
            padding-right: 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background: #f1f0f5

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .report-table-total
        width: 100%
        font-size: 16px
        color: #409EFF
        padding: 22px
        margin-top: 22px
        box-sizing: border-box
        background: #fff

    .page-all-loading
        position: fixed
        top: 55%
        left: 40%
        width: 200px

.line
    margin-bottom: 15px
    line-height: 35px

.lable
    display: inline-block
    width: 100px
    height: 30px
    font-size: 14px
    text-align: right
    padding-right: 14px
    vertical-align: top

.sub_title
    display: inline-block
    font-size: 30px

.input
    display: inline-block
    width: 200px

    &.width350
        width: 350px

.fileBg
    border: 1px solid #ddd
    border-radius: 6px
    width: 220px
    height: 140px

    img
        width: 100%
        height: 100%

.avatar-uploader
    position: absolute
    width: 220px
    height: 140px
    opacity: 0
    cursor: pointer

.avatar-uploader .el-upload
    border: 1px dashed #d9d9d9
    border-radius: 6px
    cursor: pointer
    position: relative
    overflow: hidden

.avatar-uploader .el-upload:hover
    border-color: #409EFF

.avatar-uploader-icon
    font-size: 28px
    color: #8c939d
    width: 220px
    height: 140px
    line-height: 140px
    text-align: center
</style>
